<template>
   <!-- 顶部导航 -->
   <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="$router.back()" />
   <!-- 地址列表 -->
   <van-address-list v-model="chosenAddressId" :list="addresslist" default-tag-text="默认" @add="onAdd" @edit="onEdit" />

   <!-- 弹出层控制地址编辑的显示和隐藏 -->
   <van-popup v-model:show="show" position="bottom">
      <!-- 地址编辑 -->
      <van-address-edit :area-list="areaList" :address-info="addressInfo" show-delete show-set-default
         :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" />
   </van-popup>

</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import type { AddressListAddress } from 'vant';
import { areaList } from '@vant/area-data';
import { add, update, deleteOne, list } from '@/apis/address'
import { useUserStore } from '@/store/userStore'
// 用户store
const user = useUserStore()
// AddressListAddress 每一条地址的类型说明
const chosenAddressId = ref('1')
const addresslist = ref([]);
// 你现在是要新建地址还是要编辑地址
const type = ref('add')
// 点击新建地址触发的函数
const onAdd = () => {
   // 显示地址编辑
   show.value = true;
   type.value = 'add'
}
// 点击每个地址后面的编辑按钮触发的函数
const onEdit = (option: AddressListAddress) => {
   // 显示地址编辑
   show.value = true;
   // 设置地址编辑里面的初始地址信息
   addressInfo.value = option;
   type.value = 'edit'
}
// 地址切换触发的函数
watch(chosenAddressId, (val) => {
   console.log('你在切换地址，目前切换到的id是:' + val)
})

// 地址编辑部分
// 地址编辑是否显示
const show = ref(false);
// 地址编辑里面的初始数据
const addressInfo = ref({});
// 点击保存按钮
const onSave = (option: AddressListAddress) => {
   if (type.value == 'add') {
      // 新增点保存
      add({
         ...formatAddress(option),
         userid: user.userid
      }).then(() => {
         // 隐藏编辑对话框
         show.value = false;
         // 编辑对话框里面数据清空
         addressInfo.value = {};
         // 重新请求地址列表
         showList()
      })
   } else if (type.value == 'edit') {
      // 编辑点保存
      update({
         ...formatAddress(option),
         userid: user.userid
      }).then(() => {
         // 隐藏编辑对话框
         show.value = false;
         // 编辑对话框里面数据清空
         addressInfo.value = {};
         // 重新请求地址列表
         showList()
      })
   }

}
// 点击删除按钮
const onDelete = (option: AddressListAddress) => {
   deleteOne((option as any).addressid)
      .then(() => {
         showList();
         show.value = false;
      })
}
// 页面加载的时候显示关于我的所有地址列表
// 显示地址列表的方法
const showList = () => {
   list(user.userid)
      .then(res => {
         const arr = res.data;
         arr.forEach((item: AddressListAddress) => {
            formatAddress(item)
         });
         addresslist.value = arr;
      })
}
onMounted(() => {
   showList()
})
// 地址信息对象要适应地址列表显示还要适应底部弹出的编辑应该
/* 
   // 前端用户填写地址以后，我要把数据变成下面的格式 
   {
      id:'',
      name:'',
      tel:'',
      address:'',
      province:'',
      city:'',
      county:'',
      isDefault:true,
      addressDetail:""
   }
   // 后端返回的地址数据
   {
      name:'',
      tel:'',
      city:'',
      county:'',
      province:'',
      isDefault:'',
      addressDetail:"",
      addressid:'',
      userid:''
   }
*/


// 书写一个方法，把对象里面的属性丰富一下
const formatAddress = (info: any) => {
   if (!info.address) {
      info.address = info.province + info.city + info.county + info.addressDetail;
   }
   if (info.addressid) {
      info.id = info.addressid
   }
   if (!info.areaCode) {
      const countyList = areaList.county_list;
      for (let code in countyList) {
         if (countyList[code] == info.county) {
            info.areaCode = code;
            break;
         }
      }
   }
   return info;
}
// tel:23423423423


</script>

<style scoped lang="scss">

</style>
